<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import UploadComponent from "./UploadComponent.vue";

const emit = defineEmits()
const props = defineProps({
  editEventDisposeVisiable: Boolean,
  currentEventDetail: Object
})

const response = ref({
  eventDisposeId: null,
  transactIllustrate: '',
  sceneImageUrl: '',
  annex: ''
})
const Visiable = ref(false)
watch(() => props.editEventDisposeVisiable, newVal => {
  Visiable.value = newVal;
  if (newVal) {
    response.value.eventDisposeId = props.currentEventDetail.eventDispose.id;
    response.value.transactIllustrate = props.currentEventDetail.eventDispose.transactIllustrate;
    response.value.sceneImageUrl=props.currentEventDetail.eventDispose.sceneImageUrl;
    response.value.annex = props.currentEventDetail.eventDispose.annex;
  }
})

const formLabelWidth = '140px'

const handleClose = () => {
  formRef.value.resetFields()
  emit('close', false);
}

const editEventDispose = () => {
  formRef.value.validate(valid => {
    if (valid) {
      //ElMessage.success("表单验证通过，valid的值为" + valid)

      axios.post('/eventDispose/editDisposeDetail', response.value).then(resp => {
        ElMessage.success(resp.data)
        handleClose()
      }).catch(err => {
        ElMessage.warning(err.response.data)
      })
    }else {
      //ElMessage.warning("表单验证失败")
    }
  })
}

const successHandle=val=>{
  response.value.sceneImageUrl=val;
  formRef.value.validateField('sceneImageUrl')
}

const formRef = ref();
const rules = ref({
  transactIllustrate: [
    {required: true, message: '办理说明不能为空', trigger: 'blur'},
    {min: 5, message: '办理说明不能少于5个字', trigger: 'blur'}
  ],
  sceneImageUrl: [
    {required: true, message: '现场图片不能为空'}
  ]
})
</script>

<template>
  <el-dialog v-model="Visiable" title="编辑处理隐患" width="500" @close="handleClose">
    <el-form
        :model="response"
        :rules="rules"
        ref="formRef"
    >
      <el-form-item label="办理说明" :label-width="formLabelWidth" prop="transactIllustrate">
        <el-input
            v-model="response.transactIllustrate"
            style="width: 240px"
            :rows="2"
            type="textarea"
            placeholder="办理说明"
        />
      </el-form-item>
      <el-form-item label="现场图片" :label-width="formLabelWidth" prop="sceneImageUrl">
        <!--        <img-->
        <!--            :src="response.sceneImageUrl"-->
        <!--            style="width: 50%"-->
        <!--        />-->
        <div style="border: 1px solid #ccc; border-radius: 4px; width: 240px">
          <UploadComponent :dbImage="response.sceneImageUrl" @success="successHandle"/>
        </div>
      </el-form-item>
<!--      <el-form-item label="其他附件" :label-width="formLabelWidth">-->
<!--        <el-input-->
<!--            v-model="response.annex"-->
<!--            style="width: 240px"-->
<!--            placeholder="其他附件"-->
<!--            clearable-->
<!--        />-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="editEventDispose">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: bold;
  color: #333;
}

/* 输入框和选择器样式 */
.el-input,
.el-textarea,
.el-select {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
}

.el-input::placeholder,
.el-textarea__inner::placeholder,
.el-select__placeholder {
  color: #c0c4cc;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
</style>